<template>
  <el-aside
    width="200px"
    style="background-color: rgb(238, 241, 246);border-right:1px solid rgb(238, 241, 246)"
  >
    <el-menu :default-active="$route.path" router>
      <el-menu-item
        v-for="(mRouterItem,mRouterIndex) in asideList"
        :key="mRouterIndex"
        :index="mRouterItem.path"
      >
        <i class="icon">
          <img v-if="$route.path!=mRouterItem.path" :src="mRouterItem.defaultIcon" alt />
          <img v-if="$route.path==mRouterItem.path" :src="mRouterItem.activeIcon" lat />
        </i>
        <span class="subtext" v-text="mRouterItem.name"></span>
      </el-menu-item>
    </el-menu>
  </el-aside>
</template>

<script>
import aside from "../aside/aside.js";
export default {
  props: ["status"],
  data() {
    return {
      aside: aside,
      statusr: 2,
      statusTable: {
        0: "student",
        1: "teacher",
        2: "manager"
      }
    };
  },
  computed: {
    asideList() {
      return this.aside[this.statusTable[this.statusr]];
    }
  },
  created() {
    // console.log(this.statusr);
    if (
      sessionStorage.identity == "0" ||
      sessionStorage.identity == "1" ||
      sessionStorage.identity == "2"
    ) {      
      this.statusr =parseInt(sessionStorage.identity) ; 
       console.log(this.statusTable[this.statusr]);
       
    } else {
      this.$router.push("/login");
    }
  }
};
</script>

<style scoped>
.icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
}
.icon img {
  width: 100%;
}
.subtext {
  margin-left: 10px;
  color: #ffffff;
}
.is-active {
  background: #ffffff;
}
.is-active .subtext,
.el-menu-item:hover .subtext {
  color: black;
}
</style>